<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.scroller::-webkit-scrollbar {
    height: 5px;
}

.scroller {
    width: 200px;
    height: 10px;
    overflow-x: scroll;
}

.scroller > div {
    width: 400px;
}

.t1 .scroller::-webkit-scrollbar,
.t2 + .scroller::-webkit-scrollbar,
.t3 .scroller::-webkit-scrollbar-button,
.t4 + .scroller::-webkit-scrollbar-button,
.t5 .scroller::-webkit-scrollbar-corner,
.t6 + .scroller::-webkit-scrollbar-corner,
.t7 .scroller::-webkit-scrollbar-thumb,
.t8 + .scroller::-webkit-scrollbar-thumb,
.t9 .scroller::-webkit-scrollbar-track,
.t10 + .scroller::-webkit-scrollbar-track,
.t11 .scroller::-webkit-scrollbar-track-piece,
.t12 + .scroller::-webkit-scrollbar-track-piece,
.t13 .scroller::-webkit-resizer,
.t14 + .scroller::-webkit-resizer {
    background-color: green;
}

.t13 .scroller, .t14 + .scroller {
    resize: both;
}
</style>
<div>
    <div id="scrollerParent">
        <div>
            <div id="scroller1" class="scroller">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div></div>
        </div>
    </div>
</div>
<div>
    <div id="scrollerSibling"></div>
    <div id="scroller2" class="scroller">
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div>
        <div></div>
    </div>
<script>
description("Style invalidation for scrollbar pseudo elements.");

var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";

function testScrollbarPseudo(pseudoElm, scroller, classElement, testClass, expectedCount) {

    var computedString = "getComputedStyle(" + scroller + ", '" + pseudoElm + "').backgroundColor";

    shouldBe(computedString, "transparent");

    document.body.offsetTop; // force recalc
    classElement.className = testClass;

    if (window.internals)
        shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "" + expectedCount);

    shouldBe(computedString, "green");
    classElement.className = "";
}

// The expected affected element counts below need an explanation:
//
// The descendant selector tests invalidate 2 normal dom elements:
// #scrollerParent, #scroller1
//
// The sibling selector tests invalidate 7 normal dom elements:
// #scrollerSibling, #scroller2, the div child of #scroller2 and its 4 spans
//
// In addition there the pseudo element selectors add the following pseudo elements
// on the #scroller1 and #scroller2 elements:
//
// ::-webkit-scrollbar: 1 scrollbar pseudo element (in total 3 and 8)
// ::-webkit-scrollbar-button: 1 scrollbar + 4 buttons (in total 7 and 12)
// ::-webkit-scrollbar-corner: 1 scrollbar + 1 corner (in total 4 and 9)
// ::-webkit-scrollbar-thumb: 1 scrollbar + 1 thumb (in total 4 and 9)
// ::-webkit-scrollbar-track: 1 scrollbar + 1 track (in total 4 and 9)
// ::-webkit-scrollbar-track-piece: 1 scrollbar + 2 track pieces (in total 5 and 10)
// ::-webkit-resizer: 1 scrollbar + 1 resizer (in total 4 and 9)

testScrollbarPseudo("::-webkit-scrollbar", "scroller1", scrollerParent, "t1", 2);
testScrollbarPseudo("::-webkit-scrollbar", "scroller2", scrollerSibling, "t2", 2);
testScrollbarPseudo("::-webkit-scrollbar-button", "scroller1", scrollerParent, "t3", 6);
testScrollbarPseudo("::-webkit-scrollbar-button", "scroller2", scrollerSibling, "t4", 6);
testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller1", scrollerParent, "t5", 3);
testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller2", scrollerSibling, "t6", 3);
testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller1", scrollerParent, "t7", 3);
testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller2", scrollerSibling, "t8", 3);
testScrollbarPseudo("::-webkit-scrollbar-track", "scroller1", scrollerParent, "t9", 3);
testScrollbarPseudo("::-webkit-scrollbar-track", "scroller2", scrollerSibling, "t10", 3);
testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller1", scrollerParent, "t11", 4);
testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller2", scrollerSibling, "t12", 4);
testScrollbarPseudo("::-webkit-resizer", "scroller1", scrollerParent, "t13", 3);
testScrollbarPseudo("::-webkit-resizer", "scroller2", scrollerSibling, "t14", 3);
</script>
